<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title></title>
<script type="text/javascript" src="../../lib/prototype.js"></script><script type="text/javascript" src="../../src/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
//<![CDATA[

Li = {
	onMouseDown_image: function(event) {
		new Effect.Highlight(this, {keepBackgroundImage:true});
	},
	onMouseDown_without: function(event) {
		new Effect.Highlight(this);
	}
}

window.onload = function() {
	var li = $("with").getElementsByTagName('LI');
	for (var i = 0; i < li.length; i++) {
		li[i].onmousedown = Li.onMouseDown_image.bindAsEventListener(li[i]);
	}
	var li = $("without").getElementsByTagName('LI');
	for (i = 0; i < li.length; i++) {
		li[i].onmousedown = Li.onMouseDown_without.bindAsEventListener(li[i]);
	}
}

//]]>
</script>
<style type="text/css">
body {	color: black;	background-color: white;
	font-family: Verdana, Arial, Helvetica, sans-serif;}ul {	list-style: none;	margin:0; padding:0;}
li  {
	margin: 3px 0; padding: 3px 3em 3px 24px;	border: 2px solid #456;	background-image: url(icon.png);	background-repeat: no-repeat;	background-position: 3px 3px;
}
#with li {background-color: #cde;}
#without li {background-color: #ced;}</style>
</head>
<body>
<p>Test of <code>keepBackgroundImage</code> parameter for <code>Effect.Highlight</code>. Click items to show effect.</p>
<p>With the <code>keepBackgroundImage</code> parameter.</p>
<ul id="with">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

<p>Without the parameter.</p>
<ul id="without">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>